<div th:fragment="html">
    <div id="fundDataDiv">
        <table class="inputTable ">
            <tr>
                <td width="25%" align="right">
                    <span data-toggle="tooltip" data-placement="top">请选择指数:</span>
                </td>
                <td width="25%">
                    <select v-model="myMap.fundData.code" class="indexSelect form-control" @click="queryfundData(1)">
                        <option v-for="bean in myFundMains " :value="bean.code">{{bean.fundname}} - ( {{bean.code}} )</option>
                    </select>
                </td>

                <td align="right">
           				<span data-toggle="tooltip" data-placement="top" >
            				开始日期:
           				</span>
                </td>
                <td>
                    <div class="form-group">
                        <div class="input-group date" id="date4Start">
                            <input type="text" class="form-control" v-model="myMap.startDate" placeholder="格式：2021-01-12">
                        </div>
                    </div>
                </td>
                <td align="right">
           				<span data-toggle="tooltip" data-placement="top">
            				结束日期:
           				</span>
                </td>
                <td>
                    <div class="form-group">
                        <div class="input-group date" id="date4End">
                            <input type="text" class="form-control" v-model="myMap.endDate" placeholder="格式：2021-01-12">
                        </div>
                    </div>
                </td>
            </tr>

            <tr>
                <td colspan="6" align="center">
                    <button type="button" class="btn btn-success" @click="queryfundData(1)">查询</button>
                </td>
            </tr>
        </table>

        <table class="table table-bordered table-condensed">
            <thead>
            <th align="center" colspan="7">基金明细信息</th>
            </thead>
            <tbody>
            <tr>
                <td width="10%">ID</td>
                <td width="20%">基金代码</td>
                <td width="25%">基金名称</td>
                <td width="15%">基金类型</td>
                <td width="10%">日期</td>
                <td width="10%">单位净值（万每分收益）</td>
                <td width="10%">累计净值（七天年化收益）</td>
            </tr>
            <tr v-for="bean in fundDatas">
                <td>{{bean.id}}</td>
                <td>{{bean.code}}</td>
                <td>{{myFundMain.fundname}}</td>
                <td>{{myFundMain.fundtype}}</td>
                <td>{{bean.funddate}}</td>
                <td v-if="bean.networth != null">{{bean.networth}}</td>
                    <td v-else>{{bean.millioncopiesincome}}</td>
                <td v-if="bean.totalnetworth != null">{{bean.totalnetworth}}</td>
                    <td v-else>{{bean.sevendaysyearincome}}</td>
            </tr>
            </tbody>
        </table>
        <!--    分页-->
        <div style="text-align:center;">
            <div th:replace="include/page::html"></div>
        </div>

    </div>
    <script>
        $(function () {
            var fundDataVue = {
                myMap:{fundData:{code:''},startDate:'',endDate:''},
                fundDatas: [],
                pagination: {},
                myFundMains:[],
                myFundMain:{fundname:'',fundtype:''},
            };
            var vue = new Vue({
                el: '#fundDataDiv',
                data: fundDataVue,
                mounted: function () {
                    this.$nextTick(function () {
                        this.init();
                    });
                },
                methods: {
                    init:function(){
                        // 先获取所有，后续修改成用户个性化
                        var url = "/fundmains/list";
                        axios.get(url).then(function (response) {
                            vue.myFundMains = response.data.list;
                            if(vue.myFundMains.length>0){
                                var code0=vue.myFundMains[0].code;
                                vue.myMap={fundData:{code:code0},startDate:'',endDate:''};
                                vue.queryfundData(1);
                            }
                        });
                    },
                    queryfundData: function (start) {
                        if(undefined==vue.pagination.size)
                            vue.pagination.size=10;

                        var url = "/funddatas/list/" + vue.pagination.size + "/" + start;
                        axios.post(url,vue.myMap).then(function (response) {
                            vue.pagination = response.data.pagination;
                            vue.fundDatas = vue.pagination.records;
                            vue.defineMyFundMain();
                        });
                    },
                    defineMyFundMain:function(){
                        for(var i=0;i<vue.myFundMains.length;i++){
                            console.log("fms:"+vue.myFundMains[i].code+","+vue.myFundMains[i].fundtype);
                            console.log("vue.myMap.fundData.code:"+vue.myMap.fundData.code);
                            if(vue.myFundMains[i].code == vue.myMap.fundData.code){
                                vue.myFundMain={fundname:vue.myFundMains[i].fundname,fundtype:vue.myFundMains[i].fundtype};
                            }

                        }
                    },
                    ChangePageSize: function () {
                        vue.queryfundData(vue.pagination.current);
                    },
                    jump: function(page){
                        if('first'== page && !vue.pagination.isfirst)
                            vue.queryfundData(1);
                        else if('pre'== page && !vue.pagination.isfirst)
                            vue.queryfundData(vue.pagination.current-1);
                        else if('next'== page && !vue.pagination.islast)
                            vue.queryfundData(vue.pagination.current+1);
                        else if('last'== page && !vue.pagination.islast)
                            vue.queryfundData(vue.pagination.pages);
                    },
                    jumpByNumber: function(start){
                        if(vue.pagination.current != start){
                            vue.queryfundData(start);
                        }
                    },
                }
            });
        });
    </script>

</div>
